<template>
  <!-- 打印模板 -->
  <el-card>
    <el-row style="margin-bottom: 10px">
      <el-col :span="24">
        <div>
          <!-- 纸张设置 -->
          <el-button-group>
            <el-button v-for="(value,type) in paperTypes" :key="type" size="mini" :type="curPaperType === type ? 'primary' : ' '" @click="setPaper(type,value)">
              {{ type }}
            </el-button>
          </el-button-group>
          <el-popover
            v-model="paperPopVisible"
            placement="bottom"
            width="300"
            title="设置纸张宽高(mm)"
          >
            <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
              <el-input v-model="paperWidth" type="number" style=" width: 100px; text-align: center" place="宽（mm）" />~
              <el-input v-model="paperHeight" type="number" style=" width: 100px; text-align: center" place="高（mm）" />
            </div>
            <div>
              <el-button type="primary" size="mini" style="width: 100%" @click="otherPaper">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="primary" style="margin:0 10px">自定义宽高</el-button>
          </el-popover>
          <!--          <a-slider v-model="count" style="width: 200px" :min="1" :max="10000"/>-->
          <!--          <a-input-number v-model="count" :min="1" :max="10000" style="margin-left: 16px"/>-->
          <!-- 预览/打印 -->
          <el-button-group>
            <el-button type="primary" size="mini" icon="el-icon-view" @click="preView">
              预览
            </el-button>
            <el-button type="primary" size="mini" icon="el-icon-printer" style="margin-left: 10px;" @click="print">
              直接打印
            </el-button>
            <el-button type="primary" size="mini" icon="el-icon-delete" style="margin-left: 10px;" @click="clearPaper">
              清空
            </el-button>
          </el-button-group>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-card style="height: 100vh">
          <el-row>
            <el-col :span="24" class="rect-printElement-types hiprintEpContainer" />
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="card-design">
          <div id="hiprint-printTemplate" class="hiprint-printTemplate" />
        </el-card>
      </el-col>
      <el-col :span="6" class="params_setting_container">
        <el-card>
          <el-row class="hinnn-layout-sider">
            <div id="PrintElementOptionSetting" />
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 预览 -->
    <print-preview ref="preView" />
  </el-card>
</template>
<script>
import { hiprint } from 'vue-plugin-hiprint';
import { customPrintElementProvider } from './providers';
import provider from './providers2';
import printPreview from './preview';
let hiprintTemplate; let printData = {};
export default {
  name: 'PrintTemplate',
  components: { printPreview },
  data() {
    return {
      paperPopVisible: false,
      // 纸张类型
      paperTypes: {
        'A3': {
          width: 420,
          height: 296.6
        },
        'A4': {
          width: 210,
          height: 296.6
        },
        'A5': {
          width: 210,
          height: 147.6
        },
        'B3': {
          width: 500,
          height: 352.6
        },
        'B4': {
          width: 250,
          height: 352.6
        },
        'B5': {
          width: 250,
          height: 175.6
        }
      },
      // 当前纸张
      curPaper: {
        width: 210,
        height: 296.6
      },
      // 自定义纸张
      paperWidth: '80',
      paperHeight: '60'
    };
  },
  computed: {
    curPaperType() {
      let type = 'other';
      let types = this.paperTypes;
      for (const key in types) {
        let item = types[key];
        let { width, height } = this.curPaper;
        if (item.width === width && item.height === height) {
          type = key;
        }
      }
      return type;
    }
  },
  mounted() {
  },
  methods: {
    initData(a) {
      // a = '{"panels":[{"index":0,"height":60,"width":80,"paperHeader":0,"paperFooter":170.07874015748033,"printElements":[{"options":{"left":61.5,"top":1.5,"height":91,"width":88,"src":"http://his.gaozhentang.com:9008/static/img/logo_mini.288696e7.png","right":149.5,"bottom":92.5,"vCenter":105.5,"hCenter":47},"printElementType":{"title":"图片","type":"image"}},{"options":{"left":9,"top":117,"height":9.75,"width":208.5,"title":"挂号单号","field":"orderNo","testData":"GH1001202306050213","coordinateSync":false,"widthHeightSync":false,"fontSize":12,"qrCodeLevel":0,"right":198.75,"bottom":126,"vCenter":102.75,"hCenter":121.125},"printElementType":{"title":"文本","type":"text"}}],"paperNumberLeft":196,"paperNumberTop":148}]}';
      // a = '{"panels":[{"index":0,"height":296.6,"width":210,"paperHeader":0,"paperFooter":170.07874015748033,"printElements":[{"options":{"left":60,"top":25.5,"height":91,"width":88,"src":"http://his.gaozhentang.com:9008/static/img/logo_mini.288696e7.png","right":246.25,"bottom":118,"vCenter":202.25,"hCenter":72.5},"printElementType":{"title":"图片","type":"image"}}],"paperNumberLeft":196,"paperNumberTop":148}]}';

      let panelData = JSON.parse(a);
      const [{ width, height }] = panelData.panels || [this.curPaper]; // 回显的尺寸
      this.curPaper.width = width;
      this.curPaper.height = height;
      hiprintTemplate.setPaper(width, height);
      hiprintTemplate.update(panelData);
    },

    init(val) {
      console.log(11111111);
      hiprint.init({
        providers: [customPrintElementProvider(val)]
      });
      // 还原配置
      hiprint.setConfig();
      // 替换配置
      hiprint.setConfig({
        movingDistance: 2.5,
        text: {
          supportOptions: [
            {
              name: 'styler',
              hidden: true
            },
            {
              name: 'formatter',
              hidden: true
            }
          ]
        }
      });
      this.$('.hiprintEpContainer').empty();
      hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'taskProviderModule');
      this.$('#hiprint-printTemplate').empty();
      hiprintTemplate = new hiprint.PrintTemplate({
        template: [],
        settingContainer: '#PrintElementOptionSetting',
        paginationContainer: '.hiprint-printPagination'
      });
      hiprintTemplate.design('#hiprint-printTemplate');
      this.clearPaper();
    },
    // 切换适用页面
    setBusinessType(val) {
      console.log(val);
      this.init(val);
      this.setPaper('A4', { width: 210, height: 296.6 });
    },
    // 设置纸张大小
     setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = { type: type, width: value.width, height: value.height };
          hiprintTemplate.setPaper(value.width, value.height);
        } else {
          this.curPaper = { type: 'other', width: value.width, height: value.height };
          hiprintTemplate.setPaper(value.width, value.height);
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`);
      }
    },
    otherPaper() {
      let value = {};
      value.width = this.paperWidth;
      value.height = this.paperHeight;
      this.paperPopVisible = false;
      this.setPaper('other', value);
    },
    preView() {
      let { width } = this.curPaper;
      console.log(this.$refs.preView);
      this.$refs.preView.show(hiprintTemplate, printData, width);
    },
    print() {
      hiprintTemplate.print(printData, {}, {
        styleHandler: () => {
          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
          return css;
        }
      });
    },
    clearPaper() {
      try {
        hiprintTemplate.clear();
      } catch (error) {
        this.$message.error(`操作失败: ${error}`);
      }
    },
    preserveFormwork() {
      let json = hiprintTemplate.getJson();
      return json;
    }
  }
};
</script>

<style lang="scss" scoped>
.rect-printElement-types {
  // build 拖拽
  ::v-deep.hiprint-printElement-type>li>ul>li>a {
    padding: 4px 4px;
    color: #1296db;
    line-height: 1;
    height: auto;
    text-overflow: ellipsis;
  }
}

// 设计容器
.card-design {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}

</style>
